import {
  PageContainer,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { useRequest, useModel } from '@umijs/max';
import { history } from 'umi';
import { Button, Card, Input, message, Timeline } from 'antd';
import type { FC } from 'react';
import { useState, useRef, useEffect } from 'react'
import { fakeSubmitForm, getActiveListFn, updateActiveListFn, getUserFn } from './service';
import useStyles from './style.style';

const BasicForm: FC<Record<string, any>> = () => {
  const { styles } = useStyles();
  const { initialState } = useModel<any>('@@initialState');
  const [addValue, setAddValue] = useState('')
  const formRef = useRef<any>();

  const { run } = useRequest(fakeSubmitForm, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
    },
  });

  const { data: userData = [] } = useRequest(() => {
    return;
  });

  const { data: listData = [], run: getActiveList } = useRequest(() => {
    return getActiveListFn(initialState?.currentUser.merchant_id);
  });

  const { run: runActive } = useRequest(updateActiveListFn, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
      getActiveList()
    },
  });

  const onFinish = async (values: Record<string, any>) => {
    run({ ...values, merchant_id: initialState?.currentUser.merchant_id });
  };

  const addActive = () => {
    const params = {
      merchant_id: initialState?.currentUser.merchant_id,
      content: addValue,
    }
    runActive(params)
    setAddValue('')
  }

  const timeLineChildren = () => {
    const data = listData?.map((item: any) => ({ name: item.content, time: item.created_time }))
    const defaultItem = [{
      name: <Input value={addValue} onChange={(e) => setAddValue(e.target.value)} />,
      time: (<div className={styles.icon_wrap}>
        <CheckOutlined style={{ color: 'red' }} onClick={addActive} />
        <CloseOutlined onClick={() => setAddValue('')} />
      </div>),
    }]
    const finallData = data.concat(defaultItem)
    return finallData.map((item: any, index: number) => {
      return (
        <Timeline.Item key={index}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>{item.name}</div>
            <div>{item.time}</div>
          </div>
        </Timeline.Item>
      )
    })
  }


  useEffect(() => {
    getUserFn().then((res: any) => {
      const userDataInfo = res.find((e: any) => String(e.id) === String(initialState?.currentUser.merchant_id))
      if (userDataInfo) {
        formRef.current?.setFieldsValue({
          restaurant_name: userDataInfo.restaurant_name,
          restaurant_type: userDataInfo.restaurant_type,
          cuisine_type: userDataInfo.cuisine_type,
          address: userDataInfo.address,
        });
      }
    })

  }, []);

  return (
    <PageContainer content={<Button onClick={() => history.back()}>返回</Button>}>
      <div className={styles.edit_wrap}>
        <Card bordered={false} className={styles.edit_wrap_left}>
          <ProForm
            hideRequiredMark
            style={{
              margin: 'auto',
              marginTop: 8,
              maxWidth: 600,
            }}
            formRef={formRef}
            name="basic"
            layout="horizontal"
            onFinish={onFinish}
          >
            <ProFormText
              width="md"
              label="店铺名称"
              name="restaurant_name"
              rules={[
                {
                  required: true,
                  message: '请输入店铺名称',
                },
              ]}
              placeholder="给店铺起个名字"
            />
            <ProFormSelect
              label='店铺类型'
              name="restaurant_type"
              rules={[
                {
                  required: true,
                  message: '请选择店铺类型',
                },
              ]}
              options={[
                {
                  label: '私密',
                  value: 'private',
                },
                {
                  label: '公开',
                  value: 'public',
                },
              ]}
              placeholder="请选择店铺类型"
            />
            <ProFormSelect
              label='美食类型'
              name="cuisine_type"
              rules={[
                {
                  required: true,
                  message: '请选择美食类型',
                },
              ]}
              options={[
                {
                  label: '私密',
                  value: 'private',
                },
                {
                  label: '公开',
                  value: 'public',
                },
              ]}
              placeholder="请选择美食类型"
            />
            <ProFormText
              width="md"
              label='门店地址'
              name="address"
              placeholder="请输入门店地址"
            />

          </ProForm>
        </Card>
        <Card bordered={false} className={styles.edit_wrap_right}>
          <Timeline
            reverse
          >
            {timeLineChildren()}
          </Timeline>
        </Card>
      </div>
    </PageContainer>
  );
};
export default BasicForm;
